<template>
  <div class="comp-item-container">
    <a-form-item
      :disabled="attrs.viewMode === BaseDataUtils.viewMode.VIEW"
      class="comp-item-content select-item"
      label="二级下拉菜单标题"
      field="name"
      required
      label-col-flex="0px"
      :validate-trigger="['']"
    >
      <a-input
        placeholder="请输入"
        v-model.trim="attrs.modelForm.name"
        @input="(value, ev) => attrs.handleChange(value, attrs.modelForm.id)"
      />
    </a-form-item>
    <a-form-item
      label="下拉选项"
      field="data"
      required
      label-col-flex="0px"
      :content-flex="false"
      :label-col-style="{ marginBottom: '16px' }"
      class="child-box"
    >
      <a-collapse
        :bordered="false"
        accordion
        v-for="(item, index) in attrs.modelForm.data"
        :active-key="activeVal"
        @change="handleChange"
      >
        <a-collapse-item :key="index + 1">
          <template #header>
            <div class="select-option-item child-item">
              <div class="option-item-form multiple-item-form">
                <a-form-item
                  :disabled="attrs.viewMode === BaseDataUtils.viewMode.VIEW"
                  class="option-item multiple-item"
                  :label="`选项${index + 1}`"
                  :field="`data.${index}.text`"
                  content-class="multiple-item-form"
                  :label-col-style="{ marginRight: '12px' }"
                  hide-asterisk
                  :validate-trigger="['']"
                  :rules="[
                    {
                      required: true,
                      message: `选项${index + 1}名称不能为空`,
                    }
                  ]"
                >
                  <a-input
                    placeholder="请输入选项名称"
                    v-model.trim="item.text"
                    :style="{ width: '272px', height: '32px' }"
                    @input="(value, ev) => attrs.handleChildChange(value, index, 'text')"
                  ></a-input>
                </a-form-item>
                <a-form-item
                  disabled
                  class="option-item multiple-item"
                  label="编码"
                  :field="`data.${index}.code`"
                  content-class="multiple-item-form"
                  :label-col-style="{ marginRight: '12px' }"
                  hide-asterisk
                >
                  <a-input
                    v-model.trim="item.code"
                    placeholder="请输入"
                    :style="{ width: '272px', height: '32px' }"
                    @input="(value, ev) => attrs.handleChildChange(value, index, 'code')"
                  ></a-input>
                </a-form-item>
              </div>
              <div class="option-icon action-item" v-show="attrs.viewMode !== BaseDataUtils.viewMode.VIEW">
                <i
                  class="iconfont icon-tianjia"
                  v-if="index === 0 || index === attrs.modelForm.data.length - 1"
                  @click.stop="() => props.handleCompAdd(index + 1)"
                ></i>
                <i
                  class="iconfont icon-shanchu1"
                  v-if="attrs.modelForm.data.length > 1 && index !== 0"
                  @click.stop="() => props.handleCompDel(index)"
                ></i>
              </div>
            </div>
          </template>
          <a-form-item
            class="child-select-content select-option-item child-item"
            v-for="(t, i) in item.child"
          >
            <div class="option-item-form multiple-item-form">
              <a-form-item
                :disabled="attrs.viewMode === BaseDataUtils.viewMode.VIEW"
                class="option-item multiple-item"
                :label="`二级选项${i + 1}`"
                :field="`data.${index}.child.${i}.text`"
                content-class="multiple-item-form"
                :label-col-style="{ marginRight: '12px' }"
                hide-asterisk
                :validate-trigger="['']"
                :rules="[
                {
                  required: true,
                  message: `二级选项${i + 1}名称不能为空`,
                }
              ]"
              >
                <a-input
                  placeholder="请输入选项名称"
                  v-model.trim="t.text"
                  :style="{ width: '272px', height: '32px' }"
                  @input="
                    (value, ev) => attrs.handleSecondChildChange(value, index, i, 'text')
                  "
                ></a-input>
              </a-form-item>
              <a-form-item
                disabled
                class="option-item multiple-item"
                label="编码"
                :field="`data.${index}.child.${i}.code`"
                content-class="multiple-item-form"
                :label-col-style="{ marginRight: '12px' }"
                hide-asterisk
              >
                <a-input
                  v-model.trim="t.code"
                  placeholder="请输入"
                  :style="{ width: '272px', height: '32px' }"
                  @input="
                    (value, ev) => attrs.handleSecondChildChange(value, index, i, 'code')
                  "
                ></a-input>
              </a-form-item>
            </div>
            <div class="option-icon action-item" v-show="attrs.viewMode !== BaseDataUtils.viewMode.VIEW">
              <i
                class="iconfont icon-shanchu1"
                v-if="item.child.length > 1 && i !== 0"
                @click.stop="() => props.handleCompChildDel(index, i)"
              ></i>
              <i
                class="iconfont icon-tianjia"
                v-if="i === 0 || i === item.child.length - 1"
                @click.stop="() => props.handleCompChildAdd(index, i + 1)"
              ></i>
            </div>
          </a-form-item>
        </a-collapse-item>
      </a-collapse>
    </a-form-item>
  </div>
</template>
<script lang="ts" setup name="ChildSelect">
// @ts-nocheck
import { useAttrs, ref } from "vue";
import * as BaseDataUtils from "@/views/configCenter/utils/useBaseData";
interface Prop {
  handleCompAdd: Function;
  handleCompDel: Function;
  handleCompChildDel: Function;
  handleCompChildAdd: Function;
}
const attrs = useAttrs() as {
  modelForm: any;
  viewMode: string;
  handleChange: Function;
  handleChildChange: Function;
  handleSecondChildChange: Function;
};
const props = defineProps<Prop>();
const activeVal = ref<(string | number)[]>([]);
const handleChange = (activeKey: (string | number)[], ev: Event) => {
  ev.stopPropagation();
  activeVal.value = [];
  activeVal.value = activeKey;
};
</script>
<style lang="less" scoped>
@import url("../styles/typeModal.less");
@import url("../styles/compModal.less");
</style>
